<style>
    .mulu .guding{
        background: #000;
        opacity:.5;
        position: fixed;
        z-index:1002;
        width:100%;
        height:100%;
        top:3.6em;
    }
    .mulu ul{
        padding:0;
        text-align:center;
    }
    .mulu .theme{
        top:3.6em;
        padding:0;
        position: fixed;
        z-index:1002;
        width:100%;
        background: #eee;
    }
    .mulu li i{
        position: absolute;
        right: 1.2em;
        line-height: 2.5em;
    }
    .mulu .theme div{
        line-height:2.5em;
        border-bottom:1px solid #ddd;
        background: #eee;
        width:100%;
    }
    .mulu .theme li li{
        line-height:2.5em;
        border-bottom:1px dashed #ddd;
    }
    .mulu .theme li li:last-child{
        border-bottom:none;
    }
    .mulu .theme li{
        background: #fff;
    }
    .mulu .theme a{
        color:#000;
    }
</style>
<div class = "mulu" ng-controller = "titleCtl" ng-init="mulu = false">
    <div class = "col-xs-12 title-header">
        <div class = "col-md-2 col-xs-2 col-md-offset-2"><i class="fa fa-archive"></i></div>
        <div class = "col-md-4 col-xs-8 text-center">测试项目</div>
        <div class = "col-md-2 col-xs-2" ng-click = "mulu = !mulu"><i class="fa fa-bars pull-right" style = "line-height:3.5em;"></i></div>
    </div>
    <div ng-show = "mulu">
        <div class = "guding"></div>
        <ul class = "theme">
            <li ng-repeat = "data in datas">
                <div ng-click = "toggle(data.attr)"><span>{{data.main}}</span><i ng-class="{'fa fa-plus': !data.state, 'fa fa-minus': data.state}"></i></div>
                <ul ng-show = "data.state">
                    <li ng-repeat = "list in data.children"><a href = "{{list.url}}">{{list.title}}</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
{block name="script"}
<script>
    app.controller('titleCtl', function($scope){
        $scope.datas = [
            {'main':'首页','attr':'first','icon':'fa fa-plus','state':true, 'children':[{'title':'会员列表','url':'#'},{'title':'密码重置','url':'#'},{'title':'个人主页','url':'#'}]},
            {'main':'个人中心','attr':'second','icon':'fa fa-plus','state':false, 'children':[{'title':'个人注册信息（+编辑）','url':'#'},{'title':'联系人','url':'#'},{'title':'同城活动','url':'#'}]},
            {'main':'更多','attr':'third','icon':'fa fa-plus','state':false, 'children':[{'title':'房屋交易（租赁）','url':'#'},{'title':'装修','url':'#'},{'title':'美容整形','url':'#'},{'title':'项目招投标','url':'#'}]}
        ]
        $scope.toggle = function(attr){
            console.log('attr---',attr);
            angular.forEach($scope.datas,function(data){
                attr == data.attr? data.state = true:data.state = false;
            })
        }
    });
</script>
{/block}